<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
      <el-row>
        <el-col :span="24">
          <el-form-item label="父菜单" prop="userName">
            <el-cascader :options="options" v-model="form.checed" placeholder="默认选择一级菜单"
              :props="{ checkStrictly: true, value: 'id', label: 'menuName' }" clearable></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="form.menuType">
              <el-radio v-for="item in menuType" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="form.menuName" @change="SaverouteName()"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="路由名称" prop="routeName">
            <el-input v-model="form.routeName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组件路由" prop="componentPath">
            <el-input v-model="form.componentPath"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单路由" prop="menuUrl">
            <el-input v-model="form.menuUrl"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单接口" prop="menuInterface">
            <el-input v-model="form.menuInterface"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单接口" prop="menuInterface">
            <el-input v-model="form.menuInterface"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重定向" prop="redirection">
            <el-input v-model="form.redirection"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { Find } from "@/api/menu";
import { Update } from "@/api/menu";
import pinyin from "js-pinyin";
import { List } from "@/api/menu";
export default {
  data() {
    return {
      form: {
        menuId: "",
        menuName: "",
        menuType: "",
        menuUrl: "",
        parentId: "",
        menuIcon: "",
        menuInterface: "",
        routeName: "",
        componentPath: "",
        redirection: "",
        checed: [],
        parentIdAll: "",
        checedwss: [],
      },
      rules: {
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        menuType: [
          { required: true, message: "请输入菜单类型", trigger: "blur" },
        ],
        menuUrl: [
          { required: true, message: "请输入菜单路由", trigger: "blur" },
        ],
        menuInterface: [
          { required: true, message: "请输入菜单接口", trigger: "blur" },
        ],
      },
      options: [],
      icons: [
        "fas fa-address-book",
        "fas fa-address-card",
        "fas fa-adjust",
        "fas fa-align-center",
        // 省略了大量图标
      ],
      selectedIcon: "fas fa-address-book",
      searchTerm: "",
    };
  },
  props: {
    menuType: {
      type: Array,
    },
    Id: {
      type: Number,
    },
  },
  computed: {
    filteredIcons() {
      const regex = new RegExp(this.searchTerm, "gi");
      return this.icons.filter((icon) => icon.match(regex));
    },
  },
  methods: {
    EditMenu() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let _this = this;
          _this.form.parentIdAll = _this.form.checedwss.join(",");
          console.log(_this.form.parentIdAll);
          let parentSize = _this.form.checed.length;
          _this.form.parentId = _this.form.checed[parentSize - 1];
          console.log(_this.form.parentId);
          debugger;
          Update(this.form).then((res) => {
            if (res) {
              this.$message.success("修改成功");
              location.reload();
              return;
            } else {
              this.$message.error("修改失败");
              return;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getmenu() {
      List().then((res) => {
        this.options = res.data;
      });
    },
    selectIcon(icon) {
      this.selectedIcon = icon;
      this.$emit("select", icon); // 触发父组件的 select 事件，传递所选图标
    },
    SaverouteName() {
      this.form.routeName = pinyin
        .getFullChars(this.form.menuName)
        .toLowerCase();
    },
    FindMenu() {
      Find(this.form.menuId).then((res) => {
        this.form = res.data;
        let IdArr = res.data.parentIdAll.split(",");
        console.log(IdArr);
        //IdArr.pop();
        const newArray = IdArr.slice(0, -1);
        this.form.checed = [];
        this.form.checedwss = [];
        newArray.forEach((ele) => {
          if (ele) {
            this.form.checed.push(parseInt(ele, 10));
          }
        });
        newArray.forEach((ele) => {
          if (ele) {
            this.form.checedwss.push(parseInt(ele, 10));
          }
        });
        // 将最后一个元素添加到数组中
        this.form.checedwss.push(parseInt(IdArr[IdArr.length - 1], 10));
        console.log(this.form.checed);
        console.log(this.form.checedwss);
      });
    },
  },
  created() {
    this.getmenu();
    this.form.menuId = this.Id;
    console.log(this.form.menuId);
    this.FindMenu();
  },
};
</script>
<style>
.icon-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.icon {
  font-size: 24px;
  margin: 5px;
  cursor: pointer;
}

.selected {
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
  padding: 3px;
}

.el-cascader-menu__wrap {
  height: 204px;
}

.el-cascader {
  width: 100%;
}
</style>